<template>
  <div class="order">
    <!-- 面包屑 -->
    <bread-crumb
      :titles="['首页', '订单管理', '订单列表']"
      :path="{ path: '/home' }"
    ></bread-crumb>
    <el-card>
      <!-- 卡片搜索区 -->
      <el-row>
        <el-col :span="8">
          <el-input placeholder="请输入订单名称" width="50%">
            <template #append>
              <el-button icon="el-icon-search"></el-button>
            </template>
          </el-input>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <order-table
        :tableData="orderList"
        @queryLogistics="queryLogistics"
      ></order-table>
      <!--分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <!-- 物流信息对话框 -->
    <order-dialog ref="orderDialog" :timelineList="timelineList"></order-dialog>
  </div>
</template>

<script>
import OrderDialog from "./children/OrderDialog";
import OrderTable from "./children/OrderTable";
import BreadCrumb from "@/components/BreadCrumb";
export default {
  name: "Order",
  data() {
    return {
      //获取数据的参数
      queryInfo: {
        query: "",
        pagenum: 1,
        pagesize: 10
      },
      total: 0, //一共可获取数据的总数
      orderList: [],

      timelineList: []
    };
  },
  created() {
    this.getOrderList();
  },
  methods: {
    getOrderList() {
      this.$http
        .get("orders", {
          params: this.queryInfo
        })
        .then(res => {
          if (res.data.meta.status == 200) {
            this.total = res.data.data.total;
            this.orderList = res.data.data.goods;
            console.log(res.data.data);
          } else {
            this.$message.error("获取数据失败");
          }
        })
        .catch(err => err);
    },
    //分页组件的size改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize;
      this.getOrderList();
    },
    //分页组件的页码发生变化
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage;
      this.getOrderList();
    },
    //查询物流
    queryLogistics() {
      this.$refs.orderDialog.isvisible = true;
      this.$http
        .get(`/kuaidi/111111111111`)
        .then(res => {
          console.log("```");
          if (res.data.meta.status == 200) {
            this.timelineList = res.data.data;
          } else {
            this.$message.error("获取物流信息失败");
          }
        })
        .catch(err => {
          console.log(err);

          this.$message.error("错误");
        });
    }
  },
  components: {
    BreadCrumb,
    OrderTable,
    OrderDialog
  }
};
</script>

<style lang="scss" scoped></style>
